<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <!-- SPA: single page application -->
        <div id="app">
            <!-- <p>{{ msg.split('').reverse().join('') }}</p> -->
            <p>{{ msg }}</p>
            姓名: <input type="text" v-model="value" />
            <p>姓:{{value | formatterSur }}</p>
            <p>名:{{value | formatterName}}</p>
        </div>
        <script src="../vue.js"></script>
        <script>
            // vue是MVVM框架 view  model
            let vm = new Vue({
                el: '#app',
                data() {
                    return {
                        text: 'hello',
                        value: '',
                    };
                },
                computed: {
                    msg() {
                        return this.text.split('').reverse().join('');
                    },
                },
                filters: {
                    formatterSur(val) {
                        if (val.length == 2 || val.length == 3) {
                            return val.split('')[0];
                        }
                    },
                    formatterName(val) {
                        if (val.length == 2) {
                            return val.split('')[1];
                        } else if (val.length == 3) {
                            return val.split('').slice(1).join('');
                        }
                    },
                },
            });

            //
            'hello'.split(''); // ["h", "e", "l", "l", "o"]
            'hello'.split('').reverse(); // ["o", "l", "l", "e", "h"]
            'hello'.split('').reverse().join(''); // olleh
            let arr = [1, 2, 3, 4];
            arr.reverse();
            console.log(arr);
        </script>
    </body>
</html>
